<template>
  <s-page custom-class="Switch-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-switch v-model="checked" />
      </c-demo-block>

      <c-demo-block title="禁用状态">
        <s-switch v-model="checked" disabled />
      </c-demo-block>

      <c-demo-block title="加载状态">
        <s-switch v-model="checked" loading />
      </c-demo-block>

      <c-demo-block title="主题色">
        <s-row gutter="40">
          <s-col><s-switch v-model="checked" type="primary" /></s-col>
          <s-col><s-switch v-model="checked" type="success" /></s-col>
          <s-col><s-switch v-model="checked" type="danger" /></s-col>
        </s-row>
      </c-demo-block>

      <c-demo-block title="自定义大小">
        <s-switch v-model="customSizeChecked" size="48" />
      </c-demo-block>

      <c-demo-block title="自定义颜色">
        <s-switch v-model="customColorChecked" active-color="linear-gradient(to right, #ff6034, #ee0a24)" inactive-color="#dcdee0" />
      </c-demo-block>

      <c-demo-block title="异步控制">
        <s-switch :value="asyncChecked" @input="onInput" />
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    checked: true,
    customSizeChecked: true,
    customColorChecked: true,
    asyncChecked: false,
  }),
  methods: {
    onInput(checked) {
      uni.showModal({
        title: '提示',
        content: '是否切换开关？',
        showCancel: true,
        success: ({ confirm }) => {
          if (confirm) {
            this.asyncChecked = checked;
          }
        },
      });
    },
  },
  onLoad() { },
};
</script>

<style lang="scss">
.Switch-Page {
  padding: 0 $padding-md;
}
</style>
